<template>
  <div class="registForm">
    
    <Form ref="userInfoTmp" :model="userInfoTmp" :rules="ruleInline" :label-width="80">
        <FormItem prop="user" label="用户名">
            <Input type="text" v-model="userInfoTmp.user" placeholder="用户名"></Input>
        </FormItem>
        <FormItem label="电子邮箱" prop="mail">
            <Input v-model="userInfoTmp.mail" placeholder="电子邮箱"></Input>
        </FormItem>
        <FormItem label="手机" prop="phone">
            <Input v-model="userInfoTmp.phone" placeholder="手机号" :maxlength="11"></Input>
        </FormItem>
        <FormItem prop="password" label="密码">
            <Input type="password" v-model="userInfoTmp.password" :maxlength="16" placeholder="请输入密码"></Input>
        </FormItem><FormItem prop="password2" label="再次输入">
            <Input type="password" v-model="userInfoTmp.password2" placeholder="请再次输入密码"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('userInfoTmp')">注册</Button>
        </FormItem>
    </Form>
  </div>
</template>
<script>
export default {
  data() {
    // 验证器
    let _this = this;
    function myRule(rule, value, callback) {
      switch (rule.fullField) {
        case "user":
          if (/^\S{4,12}$/.test(value)) {
            // 符合要求
            _this
              .$http({
                url: "http://d182v03043.imwork.net/notepad/user_findByName",
                params: {
                  username: value
                }
              })
              .then(data => {
                let code = data.body.msg;
                if (code == 1) {
                  callback();
                } else {
                  callback(new Error("该用户名已被注册"));
                }
              })
              .catch(() => {
                callback(new Error("服务器调皮了"));
              });
          } else {
            callback(new Error("请输入4-12位非空字符"));
          }
          break;
        case "password":
          if (!/^\S{6,16}$/.test(value)) {
            callback(new Error("密码为6-16位非空字符"));
          } else {
            _this.$refs.userInfoTmp.validateField("password2");
            callback();
          }
          break;
        case "password2":
          let isLang = /^\S{6,16}$/.test(value);
          let iseq = value == _this.userInfoTmp.password;
          if (!isLang) {
            callback(new Error("密码为6-16位非空字符"));
          } else if (!iseq) {
            callback(new Error("两次密码不相符"));
          } else {
            callback();
          }
          break;
        case "phone":
          if (value == "" || /^1\d{10}$/.test(value)) {
            callback();
          } else {
            callback(new Error("手机号格式不对"));
          }
          break;
        default:
          callback();
          break;
      }
    }
    return {
      userInfoTmp: {
        user: "",
        password: "",
        password2: "",
        mail: "",
        phone: ""
      },
      formInline: {},
      ruleInline: {
        user: [
          { required: true, message: "用户名不能为空" },
          { validator: myRule, trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空" },
          { validator: myRule, trigger: "blur" }
        ],
        password2: [
          { required: true, message: "密码不能为空" },
          { validator: myRule, trigger: "blur" }
        ],
        mail: [{ type: "email", message: "邮箱格式不正确", trigger: "blur" }],
        phone: [{ validator: myRule, trigger: "blur" }]
      }
    };
  },
  name: "regist",
  methods: {
    regist() {
      this.$http({
        url: "user_regist",
        params: this.userInfoTmp
      })
        .then(data => {
          let code = data.body.msg;
          if ((code = 1)) {
            this.$Message.success("注册成功,可以请返回登录");
          } else {
            this.$Message.error("注册失败!");
          }
        })
        .catch(() => {
          this.$Message.error("系统错误!");
        });
    },
    /************************************ */
    handleSubmit(name) {
      // this.$router.push({name:'home'})
      this.$refs[name].validate(valid => {
        if (valid) {
          this.regist();
        } else {
          this.$Message.error("注册失败!");
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.registForm {
  .regist-item {
    margin: 8px 0;
  }
}
</style>

